<template>
  <h4>data</h4>
  <div>count: {{ count }}</div>
  <div>name: {{ name }}</div>
  <button @click="add">count+</button>
  <div>num: {{ state.num }}</div>
  <div>sex: {{ state.sex }}</div>
  <button @click="changeSex">change sex</button>
</template>

<script setup>
import { ref, reactive } from "vue";

// 第一个功能
const count = ref(10);
const name = ref("zhangsan");
const add = () => {
  count.value++;
};
// function add() {
//   count.value++;
// }

// -----------------------------------------------

const state = reactive({
  num: 100,
  sex: "男",
});
const changeSex = () => {
  state.sex = "女";
};
</script>

<!-- <script>
// 一般情况用ref比较多，在form表单的时候用reactive比较合适
import { ref, reactive } from "vue";

export default {
  // setup可以和其他的选项式一起用的，一般只用setup了
  // setup只是改变写法，最终会转成选项式的
  setup() {
    // 响应式数据可以用ref来定义
    const count = ref(10);
    const name = ref("zhangsan");
    const add = () => {
      count.value++;
    };

    // 还可以用reactive来定义
    // reactive可以一次性地定义很多个变量
    const state = reactive({
      num: 100,
      sex: "男",
    });
    const changeSex = () => {
      state.sex = "女";
    };

    return {
      count,
      name,
      add,
      state,
      changeSex,
    };
  },
  // data() {
  //   return {
  //     age: 20,
  //   };
  // },
};
</script> -->
